<template>
	<!-- 作业数量统计 -->
	<!-- <div style="display: flex;justify-content: space-around;flex-wrap: wrap;"> -->
	<div>
		<div class="headerstyle">作业数量统计</div>
				<div style="display: flex;justify-content: space-around;">
					<!-- 数据1 -->
						<!-- 表格显示 -->
					<div>
						<el-table
								:data="CasesizetableData"
								border
								height="120"
								style="width: 100%; font-size: 10px">
								<el-table-column
								prop="caseSize"
								label="套管尺寸"
								width="300">
								</el-table-column>
								<el-table-column
								prop="number"
								label="数量"
								width="300">
								</el-table-column>				
							</el-table>
						<!-- 图表显示 -->
						<div id='main1' style="width: 600px;height: 350px;"></div>
					</div>
					<!-- 数据2 -->
						<!-- 表格显示 -->
					<div>
						<el-table
								:data="CementMethodtableData"
								border
								height="120"
								style="width: 100%;font-size: 10px">
								<el-table-column
								prop="cementMethodName"
								label="固井方式"
								width="300">
								</el-table-column>
								<el-table-column
								prop="number"
								label="数量"
								width="300">
								</el-table-column>				
							</el-table>
						<!-- 图表显示 -->
						<div id="main2" style="width: 600px;height: 350px;"></div>
					</div>
				</div>	
				<div style="display: flex;justify-content: space-around;">
					<div>
						<!-- 数据3 -->
							<!-- 表格显示 -->
						<el-table
								:data="WellCategorytableData"
								border
								height="120"
								style="width: 100%; font-size: 10px">
								<el-table-column
								prop="wellCategoryName"
								label="井别"
								width="300">
								</el-table-column>
								<el-table-column
								prop="number"
								label="数量"
								width="300">
								</el-table-column>				
							</el-table>
						<!-- 图表显示 -->
						<div id="main3" style="width: 600px;height: 350px;"></div>
					</div>
						<div>	
							<!-- 数据4 -->
								<!-- 表格显示 -->
							<el-table
									:data="CementCompanytableData"
									border
									height="120"
									style="width: 100%; font-size: 10px">
									<el-table-column
									prop="cementCompanyName"
									label="固井公司"
									width="300">
									</el-table-column>
									<el-table-column
									prop="number"
									label="数量"
									width="300">
									</el-table-column>				
								</el-table>
							<!-- 图表显示 -->
							<div id="main4" style="width: 600px;height: 350px;"></div>	
						</div>
				</div>
	</div>
</template>

<script>
import echarts from 'echarts';
import {statisticbycountCasesize,
		statisticbycountCementMethod,
		statisticbycountWellCategory,
		statisticbycountCementDate,
		workNumberCount
		} 
from '../../../api/module/statisticalAnalysis/WorkNumberStatistics.js'
export default{
	data(){
		return{
			CasesizetableData:[],//套管尺寸表格数据
			CementMethodtableData:[],//固井方式表格数据
			WellCategorytableData:[],//井别表格数据
			CementCompanytableData:[],//固井公司表格数据
			option1 : {
						tooltip: {
							trigger: 'item'
						},
						legend: {
							data:[]
							// show:true,
							// data:[{name:'aaa',
							// itemStyle:{
							// 	color:'#2f4554'
							// },
							// }]
							// color:
						},
			            xAxis: {
							type: 'category',
			                data: []
			            },
			            yAxis: {type:'value'},
			            series: [{
			                type: 'bar',
			                data: [],
							itemStyle:{
								normal:{
									color:function(params) {
									var colorList = ['#2f4554','#61a0a8','#d48265', '#91c7ae','#749f83', '#ca8622'];
									if (params.dataIndex >= colorList.length&&params.dataIndex <= 2*colorList.length) {
										    params.dataIndex = params.dataIndex - colorList.length;
										}
									else if(params.dataIndex >2*colorList.length)
									{
										params.dataIndex = params.dataIndex - 2*colorList.length;
									}
									return colorList[params.dataIndex]
								}
							}}
			            }]
			        },
			option2 : {
						tooltip: {},
						legend: {
							data:['数量']
						},
						xAxis: {
							type: 'category',
							data: []
						},
						yAxis: {type:'value'},
						series: [{
							// name: '数量',
							type: 'bar',
							data: [],
							itemStyle:{
								normal:{
									color:function(params) {
									var colorList = ['#2f4554','#61a0a8','#d48265', '#91c7ae','#749f83', '#ca8622'];
									if (params.dataIndex >= colorList.length&&params.dataIndex <= 2*colorList.length) {
										    params.dataIndex = params.dataIndex - colorList.length;
										}
									else if(params.dataIndex >2*colorList.length)
									{
										params.dataIndex = params.dataIndex - 2*colorList.length;
									}
									return colorList[params.dataIndex]
								}
							}}
						}]
					},
			option3 : {
						tooltip: {},
						legend: {
							data:['数量']
						},
						xAxis: {
							type: 'category',
							data: []
						},
						yAxis: {type:'value'},
						series: [{
							// name: '数量',
							// color:'#2F4554',
							type: 'bar',
							data: [],
							itemStyle:{
								normal:{
									color:function(params) {
									var colorList = ['#2f4554','#61a0a8','#d48265', '#91c7ae','#749f83', '#ca8622'];
									if (params.dataIndex >= colorList.length&&params.dataIndex <= 2*colorList.length) {
										    params.dataIndex = params.dataIndex - colorList.length;
										}
									else if(params.dataIndex >2*colorList.length)
									{
										params.dataIndex = params.dataIndex - 2*colorList.length;
									}
									return colorList[params.dataIndex]
								}
							}}
						}]
					},
			option4 : {
						tooltip: {},
						legend: {
							data:['数量']
						},
						xAxis: {
							type: 'category',
							data: []
						},
						yAxis: {type:'value'},
						series: [{
							// name: '数量',
							// color:'#2F4554',
							type: 'bar',
							data: [],
							itemStyle:{
								normal:{
									color:function(params) {
									var colorList = ['#2f4554','#61a0a8','#d48265', '#91c7ae','#749f83', '#ca8622'];
									if (params.dataIndex >= colorList.length&&params.dataIndex <= 2*colorList.length) {
										    params.dataIndex = params.dataIndex - colorList.length;
										}
									else if(params.dataIndex >2*colorList.length)
									{
										params.dataIndex = params.dataIndex - 2*colorList.length;
									}
									return colorList[params.dataIndex]
								}
							}}
						}]
					}
		}
	},
	created() {
		// this.statisticbycountCasesize()
		// this.statisticbycountCementMethod()
		// this.statisticbycountWellCategory()
		// this.statisticbycountCementDate()
		this.workNumberCount()
	},
	 mounted() {
	 },
	methods:{
		//统计
		workNumberCount() {
		    workNumberCount()
		    .then( res => {
		        console.log(res.data)
				 this.CasesizetableData=res.data.caseSizes
				 for(let i=0;i<res.data.caseSizes.length;i++){
					 this.option1.xAxis.data.push(res.data.caseSizes[i].caseSize)
					 this.option1.series[0].data.push(res.data.caseSizes[i].number)
					 var chartDom1 = document.getElementById('main1');
					 var myChart1 = echarts.init(chartDom1);
					 myChart1.setOption(this.option1);
				 }
				 this.CementMethodtableData=res.data.cementMethods
				 for(let i=0;i<res.data.cementMethods.length;i++){
				 					 this.option2.xAxis.data.push(res.data.cementMethods[i].cementMethodName)
				 					 this.option2.series[0].data.push(res.data.cementMethods[i].number)
				 					 var chartDom2 = document.getElementById('main2');
				 					 var myChart2 = echarts.init(chartDom2);
				 					 myChart2.setOption(this.option2);
				 }
				 this.WellCategorytableData=res.data.wellCategories
				 for(let i=0;i<res.data.wellCategories.length;i++){
				 					 this.option3.xAxis.data.push(res.data.wellCategories[i].wellCategoryName)
				 					 this.option3.series[0].data.push(res.data.wellCategories[i].number)
				 					 var chartDom3 = document.getElementById('main3');
				 					 var myChart3 = echarts.init(chartDom3);
				 					 myChart3.setOption(this.option3);
				 }
				 this.CementCompanytableData=res.data.cementCompanies
				 for(let i=0;i<res.data.cementCompanies.length;i++){
				 					 this.option4.xAxis.data.push(res.data.cementCompanies[i].cementCompanyName)
				 					 this.option4.series[0].data.push(res.data.cementCompanies[i].number)
				 					 var chartDom4 = document.getElementById('main4');
				 					 var myChart4 = echarts.init(chartDom4);
				 					 myChart4.setOption(this.option4);
				 }
		    })
		    .catch(err => {
		        console.log("查询数据" + err)
		        this.$message.error('查询出错，请刷新！')
		    })
		},
		//根据套管尺寸统计数量
		// statisticbycountCasesize() {
		//     statisticbycountCasesize()
		//     .then( res => {
		//         console.log(res) 
		// 		this.option1.xAxis.data=res.data.names
		// 		console.log(this.option1.xAxis.data)
		// 		this.option1.series[0].data[0]=res.data.values[0]
		// 		this.option1.series[0].data[1]=''
		// 		// this.$set(this.option1.series[0].data)
		// 		console.log(this.option1.series[0].data)
		// 		this.option1.series[1].data[0]=''
		// 		this.option1.series[1].data[1]=res.data.values[1]
		// 		console.log(this.option1.series[1].data)
		// 		var chartDom1 = document.getElementById('main1');
		// 		var myChart1 = echarts.init(chartDom1);
		// 		myChart1.setOption(this.option1);
		// 		for(let i=0;i<res.data.names.length;i++)
		// 		{
					
		// 			this.CasesizetableData.push(
		// 			{CaseSize:res.data.names[i],
		// 			count:res.data.values[i]});
					
		// 		}
				
		//         // this.tableData = res.data.stratumList
		// 		// this.CasesizetableData=res.data
		// 		// for(let i=0;i<res.data.length;i++){
		// 		// 	this.Casesizeshowdata1.push(res.data[i].CaseSize)
		// 		// 	this.Casesizeshowdata2.push(res.data[i].count)
		// 		// }
		// 		// console.log(this.Casesizeshowdata1)
		//     })
		//     .catch(err => {
		//         console.log("查询数据" + err)
		//         this.$message.error('查询出错，请刷新！')
		//     })
		// },
		//根据固井方式统计数量
		// statisticbycountCementMethod() {
		//     statisticbycountCementMethod()
		//     .then(res => {
		//         console.log(res)
		//         this.option2.xAxis.data=res.data.names
		//         console.log(this.option2.xAxis.data)
		//         this.option2.series[0].data=res.data.values
		//         console.log(this.option2.series[0].data)
		//         var chartDom2 = document.getElementById('main2');
		//         var myChart2 = echarts.init(chartDom2);
		//         myChart2.setOption(this.option2);
		//         for(let i=0;i<res.data.names.length;i++)
		//         {
		        	
		//         	this.CementMethodtableData.push(
		//         	{CementMethod:res.data.names[i],
		//         	count:res.data.values[i]});
		        	
		//         }
		//     })
		//     .catch(err => {
		//         console.log("查询数据" + err)
		//         this.$message.error('查询出错，请刷新！')
		//     })
		// },
		//根据井别统计数量
		// statisticbycountWellCategory() {
		//     statisticbycountWellCategory()
		//     .then(res => {
		//         console.log(res)
		//         this.option3.xAxis.data=res.data.names
		//         console.log(this.option3.xAxis.data)
		//         this.option3.series[0].data=res.data.values
		//         console.log(this.option2.series[0].data)
		//         var chartDom3 = document.getElementById('main3');
		//         var myChart3 = echarts.init(chartDom3);
		//         myChart3.setOption(this.option3);
		//         for(let i=0;i<res.data.names.length;i++)
		//         {
		        	
		//         	this.WellCategorytableData.push(
		//         	{WellCategory:res.data.names[i],
		//         	count:res.data.values[i]});
		        	
		//         }
		//     })
		//     .catch(err => {
		//         console.log("查询数据" + err)
		//         this.$message.error('查询出错，请刷新！')
		//     })
		// },
		//根据日期统计数量
		// statisticbycountCementDate() {
		//     statisticbycountCementDate()
		//     .then(res => {
		//         console.log(res)
		//         this.option4.xAxis.data=res.data.names
		//         console.log(this.option4.xAxis.data)
		//         this.option4.series[0].data=res.data.values
		//         console.log(this.option4.series[0].data)
		//         var chartDom4 = document.getElementById('main4');
		//         var myChart4 = echarts.init(chartDom4);
		//         myChart4.setOption(this.option4);
		//         for(let i=0;i<res.data.names.length;i++)
		//         {
		        	
		//         	this.CementDatetableData.push(
		//         	{date:res.data.names[i],
		//         	count:res.data.values[i]});
		        	
		//         }
		//     })
		//     .catch(err => {
		//         console.log("查询数据" + err)
		//         this.$message.error('查询出错，请刷新！')
		//     })
		// }
	}
}
</script>

<style scoped="scoped">
.headerstyle {
	font-size: 17px;
	background-color: #eef0f6;
	height: 30px;
	padding: 5px 10px;
	margin-bottom: 10px;
}
</style>
